• Introduction
• Customizing Marker Titles and Info Boxes
• Dynamic Marker Icons-Alternate View Layout Options
• More Alternate View Layout Options
• Dynamic Marker Circles
• Dynamic Images and Image Sequences
• Layers
• Animating Markers
• Treating the Map as a Blank Canvas so that Markers on the Map can be Added Programmatically
• Search Part - Geography Searches
• Search Part - Show Search Results on Screen
• Search Part - Radius Search - Sorting result by distance from the map center point
• How to use a Grid to implement a typical 'Store Finder' application
• Update the Latitude and Longitude in the current Grid
• Updating a Geography data type Field
• Adding New Markers to a Map
• How the Grid Was Configured in Video GM12
• Alternate View Google Map JavaScript Methods

Customizing Marker Titles and Info Boxes

Description

The map marker titles and info boxes can be customized in a Google Map Alternate View. Placeholders can be used with the HTML used to define the content of the title or info box to include information from the Grid row.

The Marker title is shown when the user mouses over the map marker. The title can be an Expression, Template, or Xbasic function. The example below is an Expression. Expressions can reference data in the record for the map marker. For example, the following expression displays the airport name and its location (City, State) in parentheses:

tbl.data("NAME") + " (" + tbl.data("CITY") + ", " + tbl.data("STATE") + ")"

An optional Marker info box can be shown, as well. An info box is a popup window shown when the user clicks the map marker. The contents of the info box can also be defined using an Expression, Template, or Xbasic function. Let's take a look at how a Template could be used to define an info box that includes a hyperlink to open the detail view for a map marker.

A Template is any HTML text that you want to display. It can include placeholders for field values in the current row.

Let's start with a basic template:

<b>Airport location:</b>

This template will display the text "Airport location:" bold in the info box. Curly braces can be used to insert an Expression that includes data from fields in the current record. For example, the template below will display the airport Name, City, and State in a template:

<p>Airport location:</b> {tbl.data("NAME") + "in" + tbl.data("CITY") + ", " + tbl.data("STATE")}.

You can also include hyperlinks, buttons, etc, with events. For example, the following template includes a hyperlink that opens the detail view for the map marker's record. The onclick attribute is used to add Javascript to open the detail view:

Please click <a href="#" onclick="{grid.object}.detailView({grid.rowNumber});">here</a> to 
see more information for this airport.

The {grid.object}.detailView() method opens the detail view for a specified row. The {grid.rowNumber} placeholder will contain the row number that corresponds to each map marker. When combined with the onclick attribute for the hyperlink, the detail view can be opened by clicking the hyperlink in the info box.

By combining all of the above elements, you can build complex, interactive info boxes.

<b>Airport location: </b> {tbl.data("Name") + " in " + tbl.data("City") + ", " + tbl.data("State")}.
<br><br>
Please click <a href="#" onclick="{grid.object}.detailView({grid.rowNumber});">here</a> to 
see more information for this airport.

For more information, watch the video below:

Google Maps/Alternate View - Customizing the Marker Title and Info Box

The video shows how you can put any HTML that you want in the info box and how the html can include placeholders to include data from the corresponding row in the Grid. The HTML can also include Javascript commands. In the video we show how you can insert the Javascript to open the corresponding Detail View part for the current record.

• Watch Video